<script setup>
import { Search } from '@element-plus/icons-vue'
import { getFileType } from '@/assets/api/document'

const props = defineProps({
  breadcrumbList: Array,
  searchWord: String,
  viewType: String,
  routerFlag: String,
  fileList: Array,
})

const emit = defineEmits(['viewTypeChange', 'search', 'update:searchWord', 'updateFolderId', 'openDetail'])

const router = useRouter()
const { breadcrumbList, searchWord, viewType } = toRefs(props)
const fileType = ref([])
const suffixList = ref([])
const typeList = ref([])
const updateTime = ref([])
const popoverVisible = ref(false)

getFileTypeData()

function getFileTypeData() {
  getFileType().then((res) => {
    if (res.code === 200) {
      fileType.value = res.data
    }
  })
}

function close() {
  popoverVisible.value = false
}

function search() {
  emit('search', {
    resourceExt: {
      fieldValue: suffixList.value,
    },
    resourceType: {
      fieldValue: typeList.value,
    },
    updateTime: {
      fieldValue: {
        rangeStart: updateTime.value[0],
        rangeEnd: updateTime.value[1],
      },
    },
  })
  close()
}
function replaceFolder(item) {
  if (!props.routerFlag) {
    router.push({
      path: `/chat/fileManagement`,
      query: {
        id: item.folderId,
      },
    })
  } else {
    emit('updateFolderId', item.folderId)
  }
}
</script>

<template>
  <div class="file-list-header">
    <div class="file-list-operation">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          class="breadcrumb-content"
          @click="replaceFolder(item)"
          v-for="(item, index) in breadcrumbList"
          :key="index">
          {{ item?.resourceName }}
        </el-breadcrumb-item>
      </el-breadcrumb>
      <div class="search">
        <el-input :model-value="searchWord" @input="(v) => emit('update:searchWord', v)" placeholder="搜索" clearable>
          <template #suffix>
            <el-popover
              :visible="popoverVisible"
              popper-class="file-management-search-popover"
              placement="bottom-end"
              :popper-options="{ modifiers: [{ name: 'offset', options: { offset: [12, 15] } }] }"
              :show-arrow="false">
              <template #reference>
                <el-icon @click="popoverVisible = true">
                  <Search />
                </el-icon>
              </template>
              <div class="complex-search">
                <el-form label-width="80px" label-position="left">
                  <el-form-item label="文件类型">
                    <el-checkbox-group v-model="typeList">
                      <el-checkbox
                        v-for="(item, index) in fileType"
                        :key="index"
                        :label="item.fileTypeKey"
                        :value="item.fileTypeKey">
                        {{ item.fileTypeName }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </el-form-item>
                  <el-form-item label="后缀">
                    <el-select
                      v-model="suffixList"
                      multiple
                      allow-create
                      default-first-option
                      filterable
                      clearable
                      :reserve-keyword="false"
                      placeholder="输入后缀后按回车"></el-select>
                  </el-form-item>
                  <!--<el-form-item label="所有者">-->
                  <!--  <el-select></el-select>-->
                  <!--</el-form-item>-->
                  <el-form-item label="修改时间">
                    <el-date-picker
                      v-model="updateTime"
                      type="daterange"
                      :unlink-panels="true"
                      clearable
                      @focus.stop></el-date-picker>
                  </el-form-item>
                </el-form>
                <div class="footer">
                  <el-button @click="close">取消</el-button>
                  <el-button type="primary" @click="search">搜索</el-button>
                </div>
              </div>
            </el-popover>
          </template>
        </el-input>
      </div>
    </div>
    <div class="file-list-operation-other">
      <div class="total">{{ `共${props.fileList.length}项` }}</div>
      <div class="file-list-ation">
        <div class="file-list-ation-detail" @click="emit('openDetail')">
          <SvgIcon name="detail"></SvgIcon>
        </div>
        <div class="view-type" :class="{ 'view-type-table': viewType === 'table' }">
          <div class="view-type-item" @click="emit('viewTypeChange', 'icon')">
            <SvgIcon name="menu-project"></SvgIcon>
          </div>
          <div class="view-type-item" @click="emit('viewTypeChange', 'table')">
            <SvgIcon name="menu-list"></SvgIcon>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.file-list-header {
  position: relative;
  height: 75px;
  margin-bottom: 10px;
  .breadcrumb-content {
    font-weight: 600;
    cursor: pointer;
    font-size: 18px;
  }
  .file-list-operation {
    @include use-flex(center, space-between);
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    width: 100%;
    background-color: var(--elp-bg-color);
    &-other {
      @include use-flex(center, space-between);
      position: absolute;
      bottom: 0;
      right: 0;
      width: 100%;
      .total {
        font-size: 14px;
        color: var(--elp-color-info);
      }
      .view-type {
        @include use-flex(center, center);
        &::before {
          position: absolute;
          display: inline-block;
          content: '';
          height: 26px;
          width: 26px;
          border-radius: 5px;
          border: 1px solid var(--elp-color-primary);
          transition: transform 0.3s;
          transform: translateX(-18px);
        }
        &.view-type-table::before {
          transform: translateX(18px);
        }
        .view-type-item {
          position: relative;
          cursor: pointer;
          padding: 5px;
          @include use-flex(center, center);
          &:first-child::after {
            display: inline-block;
            content: '';
            width: 1px;
            height: 12px;
            margin-left: 10px;
            background-color: var(--elp-border-color);
          }
        }
      }
    }
    .search {
      width: 300px;
      :deep(.elp-input) {
        .elp-input__suffix {
          cursor: pointer;
        }
      }
    }
  }
}
.file-list-ation {
  display: flex;
  &-detail {
    cursor: pointer;
    display: flex;
    align-items: center;
    margin-right: 20px;
  }
}
</style>
<style lang="scss">
.file-management-search-popover {
  width: 500px !important;
  .elp-select {
    width: 100%;
  }
  .footer {
    @include use-flex(normal, flex-end);
  }
}
</style>
